import React, { useReducer, useEffect }  from "react";
import {initState,reducer,actions} from './home'
import "./Home.css";
import { reqGetNew ,reqGetSeckill,reqGetgroupon,reqGetcountdown,reqGetindexgoods,reqGetcoupon} from "../../request/api";

 import Newpeople from './componennts/newpeople/newpeople'
 import Seckill from './componennts/Seckill/Seckill'
  import Group from './componennts/Group/Group'
  import Countdown from './componennts/Countdown/Countdown'
  import Indexgoods from './componennts/Indexgoods/Indexgoods'
   import Coupon from './componennts/Coupon/coupon'
    import './Home.css'
export default function Home(props) {
  const [state,dispatch]=useReducer(reducer,initState);
  let { news,seckill,groupon,countdown,indexgoods,flag,coupon} = state;
   
  //进来页面
  useEffect(()=>{
    // 新人专享
    reqGetNew().then((res) => {
        if(res.data.code===200){
             //存信息
          dispatch(actions.changeNews(res.data.list))
        }
    });
     //秒杀
     reqGetSeckill().then((res) => {
      if(res.data.code===200){
           //存信息
        dispatch(actions.changeSeckill(res.data.list))
      }
  });
   //万人团
   reqGetgroupon().then((res) => {
    if(res.data.code===200){
         //存信息
      dispatch(actions.changeGroupon(res.data.list))
    }
});
  //倒计时
  reqGetcountdown().then((res) => {
        if(res.data.code===200){
             //存信息
          dispatch(actions.changeCountdown(res.data.list))
        }
    });
    //商品信息首页
    reqGetindexgoods().then((res) => {
              if(res.data.code===200){
                   //存信息
                dispatch(actions.changeIndexgoods(res.data.list))
              }
          });
   //优惠券
 reqGetcoupon().then((res) => {
        if(res.data.code===200){
             //存信息
          dispatch(actions.changeCoupon(res.data.list))
        }
    });
  },[])
  // let req=()=>{
  // //   reqGetindexgoods({flag:1}).then((res) => {
  // //     if(res.data.code===200){
  // //          //存信息
  // //       dispatch(actions.changeIndexgoods(res.data.list))
  // //     }
  // // });
  // }
 
  return (
    <div className='home'>
          {/* <div>
              <div>
                  <input type="text" placeholder='搜索商品'/>
              </div>
          </div> */}

         {/* 新人专享 */}
         <Newpeople news={news}></Newpeople>
         {/* 优惠券 */}
         <Coupon coupon={coupon} ></Coupon>
         {/* 秒杀 */}
         <Seckill seckill={seckill}></Seckill>
         {/* 万人团 */}
         <Group groupon={groupon}></Group>
         {/* 倒计时 */}
         <Countdown countdown={countdown}></Countdown>
         <ul className='f'>
             <li onClick={()=>dispatch(actions.changeFlag(0))} className={flag===0?'active':''}>1</li>
             <li onClick={()=>dispatch(actions.changeFlag(1))} className={flag===1?'active':''}>2</li>
             <li onClick={()=>dispatch(actions.changeFlag(2))} className={flag===2?'active':''}>3</li>
             <li onClick={()=>dispatch(actions.changeFlag(3))} className={flag===3?'active':''}>4</li>
         </ul>
         {/* 商品信息首页 */}
         <Indexgoods indexgoods={indexgoods} flag={flag}></Indexgoods>

      </div>
      
  );
}









